<template>
  <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
    <el-tab-pane label="新闻内容" name="1">
      <newstab :editableTabsValue2="editableTabsValue2" :editableTabs2="editableTabs2" @val="val" @ad="ad"
               :tabIndex="tabIndex" @index="index"
               @show="show" @show1="show1" @rule="rule" @addtab="addtab" @editab="editab"/>
    </el-tab-pane>
    <el-tab-pane
      v-for="(item, index) in editableTabs2"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      <template v-if="item.title === '新闻编辑'">
        <edit :editForm="editForm" :rules="rules"/>
      </template>
      <template v-else>
        <add/>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import Newstab from '../views/Newstab.vue'
  import {mapState} from 'vuex'
  import Edit from '../components/Edit.vue'
  import Add from '../components/Add.vue'

  export default{
    name: 'News',
    components: {
      Edit,
      Newstab,
      Add
    },
    data () {
      return {
        editableTabs2: [],
        editableTabsValue2: '1',
        tabIndex: 1,
        editForm: [],
        items: [],
        rules: Object
      }
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    mounted () {
      this.high = window.innerHeight - 210
    },
    methods: {
      removeTab (targetName) {
        let tabs = this.editableTabs2
        let activeName = this.editableTabsValue2
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              if (index === 0) {
                activeName = '1'
              } else {
                let nextTab = tabs[index - 1] || tabs[index + 1]
                if (nextTab) {
                  activeName = nextTab.name
                }
              }
            }
          })
        }
        this.editableTabsValue2 = activeName
        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName)
      },
      val (msg) {
        this.editableTabsValue2 = msg
      },
      ad (msg) {
        this.editableTabs2 = msg
      },
      index (msg) {
        this.tabIndex = msg
      },
      show (msg) {
        this.editForm = msg
      },
      show1 (msg) {
        this.items = msg
      },
      rule (msg) {
        this.rules = msg
      },
      addtab (msg) {
        var a = 0
        this.editableTabs2.forEach((item) => {
//          if (item.title === '添加新闻') {
//            this.$alert('请关闭已有的添加页面再进行此操作', '提示', {
//              confirmButtonText: '确定'
//            })
//          }
          if (item.title === '添加新闻') {
            a++
          }
        })
        if (a === 0) {
          let newTabName = ++this.tabIndex + ''
          this.editableTabs2.push({
            title: '添加新闻',
            name: newTabName
          })
          this.editableTabsValue2 = newTabName
        } else {
          this.$alert('请关闭已有的添加页面,再进行此操作', '提示', {
            confirmButtonText: '确定'
          })
        }
      },
      editab (msg) {
        let newTabName = ++this.tabIndex + ''
        this.editableTabs2.push({
          title: '新闻编辑',
          name: newTabName
        })
        this.editableTabsValue2 = newTabName
      }
    }
  }
</script>
<style>
  .el-form-item__content {
    float: none;
  }

  .el-form-item__label {
    font-size: 10pt;
  }

  .el-form-item {
    display: block;
  }
</style>
